<template>
  <div class="comment">
    <van-row v-for="item in comments" :key="item.num">
        <van-col span="5">
            <img :src="item.icon" alt="">
        </van-col>
        <van-col span="19">
          <p class="user-name">{{item.name}}</p>
        </van-col>
        <p class="content">{{item.content}}</p>
        <p class="time">2020-02-10</p>
        <van-divider />
    </van-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
    props:['tab_id'],
    data() {
      return {
        comments:[]
      }
    },
    created() {

    axios.get("http://localhost:3000/user_comments",{
    params:{
        user_id:localStorage.getItem('user_id')
    }
  })
      .then((res) => {
        console.log(res);
        this.comments = res.data.data;
      });
  },
}
</script>

<style lang="less" scoped>
img{
    border-radius: 50%;
    width: 48px;
    height: 48px;
    margin-left: 10px;
    margin-top: 18px;

}
.user-name{
  color: #ff9800;
  font-size: 17px;
  margin-top: 30px
  
}
.content{
  margin-left: 80px;
  margin-top: 10px;
}
.time{
font-size: 12px;
color: rgb(129, 122, 122);  
text-align: right;
margin-right: 28px;
}
</style>